<template>
    <div :model="article">
        <navigation></navigation>
        <div class="article">
            <el-row>
                <!-- <cebian></cebian> -->
                <el-col :lg="{span:18,offset:3}"  :md="{span:20,offset:2}">
                    <h1>{{article.source}}</h1>
                    <el-row style="marginBottom:20px">
                        <el-col :span="6"><span>时间: 2019年11月8日</span></el-col>
                        <el-col :span="6"><span>标签: 比赛信息</span></el-col>
                        <el-col :span="6"><span>来源：管理员A</span></el-col>
                        <el-col :span="6"><span>阅读量：993</span></el-col>
                    </el-row>
                    <div>
                        <div class="content">
                            <h1>TrafficHUT基于航拍视频的车辆轨迹识别竞赛</h1>
                            <p>关于举办“2020年（第13届）中国大学生计算机设计大赛”的第一次、第二次和第三次通知，在广大师生的热情参与下，今年共有近700所院校组织了约3万件作品参加2020年（第13届）中国大学生计算机设计大赛。经过全国各省级赛区的选拔推荐，共有4646件作品入围国赛。</p>
                        <p>受疫情影响，本届大赛采用腾讯会议进行线上答辩，2020年7至8月，在山东大学和厦门大学承办赛务的支持下，全国约400多名评审专家以网络评审的形式完成参加国赛作品的初评和复评，最终确定约4000件作品获颁等级奖项。</p>
                        <p>计算机科学与工程学院参赛选手们经过前期充分准备和指导教师的精心指导，并在赛场上沉着冷静、奋力拼搏，经过激烈角逐，入围国赛的5个作品表现优异全部获奖。其中：由梁兴建老师指导，练洪团队开发的物联网应用作品《智慧城市停车系统》；由王飞老师指导，余伟团队开发的软件应用与开发作品《基于自定义工作流引擎的比赛项目申报系统》；陈超(女)老师指导，童兴团队开发的信息可视化设计作品《白酒文化的千秋画卷》均获得全国赛二等奖，另外两项作品获得全国三等奖。此次大赛，展现了计算机科学与工程学院师生强烈的竞争意识和团队精神，真正发挥了团结协作，展示了学子的风采，赛出了计算机人的专业技能与实力。</p>
                        <p>中国大学生计算机设计大赛已成功举办过十三届，2018年升级为教育部A类赛事，每届均有半数以上的本科院校组队参加，本赛事首先由各省举办区域赛，由区域赛评选出一等奖、二等奖的作品（约占全部队伍的35%），入围全国赛。作为计算机类别的重要赛事，学院领导高度重视。通过前期宣传、团队打造、精心指导、认真评审等狠抓落实各个环节，对参赛作品发掘凝练创新点、提升特色、精心打造、严格选拔评审，今年共推荐17个作品在6月的省级赛中获得5个省级二等奖，3个作品获得省级三等奖，入围全国赛5项；经过后期的精心准备，五件作品斩获全国二等奖3项、全国三等奖2项。</p>
                        <p>近年来，计算机科学与工程学院为进一步提高学生的创新能力、实践能力和综合素质，大力推动学生申报大创项目、“挑战杯”等各类学生科技项目，并根据各类专业项目和比赛成立指导老师团队和学生创新团队，指导学生积极完成项目开发，鼓励学生积极参加相关的项目设计和学科竞赛。通过团队建设和积极参赛，极大地调动了学生学习积极性，增强了学生自信心，提高了学生专业竞争能力，来全面助力学生成长成才！</p>
                        </div>
                    </div>
                </el-col>
                <!-- 用户评论 -->
                <el-col :lg="{span:16,offset:4}" :md="{span:20,offset:2}" style="marginTop:20px">
                    <h1 style="color:#14a53b;float:left">我要评论</h1>
                    <el-form>
                        <el-form-item>
                            <el-input type="textarea" v-model="form" rows="6" resize="none" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);fontSize:25px"
                            maxlength="50"
                            show-word-limit
                            ></el-input>
                        </el-form-item>
                        <el-form-item style="float:right">
                            <el-button type="primary" @click="input" class="tijiao" style="color:#ffffff">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :lg="{span:16,offset:4}" :md="{span:20,offset:2}">
                    <!-- 没有评论时显示 -->
                    <p v-if="this.pinglun.length==0" style="textAlign:center">暂无评论，我来发表第一篇评论！</p>
                    <!-- 评论区 -->
                    <div v-else>
                        <div class="demo-basic--circle" v-for="item in showPinglun" :key="item.key">
                            <el-divider></el-divider>
                            <div class="block"><router-link to="/dongtai"><el-avatar :size="40" :src="item.avatar" style="float:left"></el-avatar></router-link></div>
                            <span style="float:left;lineHeight:40px;paddingLeft:30px;fontSize:30px">{{item.user_name}}</span><br><br>
                            <p style="fontSize:23px;marginTop:15px">{{item.content}}</p>
                            <p style="paddingTop:20px">{{item.creat_time}}</p>
                        </div>
                        <div class="block" style="float:right">
                            <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage1"
                            :page-sizes="[1, 2, 3, 4]"
                            :page-size="1"
                            layout="prev, pager, next, jumper"
                            :total="this.tiaoshu">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
                
            </el-row>
        </div>
        <footers></footers>
    </div>
</template>
<script>
import vue from 'vue'
import axios from 'axios'
import cebian from '../components/cebian'
export default {
    name: 'majorNew',
    data() {
        return {
            article:{
                title: "",
                date: "",
                // source: '',
                // writer: '',
                readingQua: "849",
                // src: '',
            },
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 1,
            form: '',
            tiaoshu:'',
            showPinglun:[
            {
                "user_name":"eli_tsao",
                "creat_time":"1111-10-12",
                "comment":"实力点赞",
                "avatar":"https://c-ssl.duitang.com/uploads/item/201709/26/20170926003219_RCjJE.thumb.700_0.jpeg",
            },{
                "user_name":"esao",
                "creat_time":"1999-10-12",
                "comment":"实力点实力点赞实力点赞赞",
                "avatar":"https://c-ssl.duitang.com/uploads/item/201801/17/20180117181801_KRYJQ.thumb.700_0.jpeg",
            },{
                "user_name":"eli_tsao",
                "creat_time":"1999-10-12",
                "comment":"实力点赞实实力点赞力点实力点赞实力点赞赞",
                "avatar":"http://static.hdslb.com/images/member/noface.gif",
            },{
                "user_name":"mu",
                "creat_time":"1999-10-12",
                "comment":"实力点赞",
                "avatar":"https://avatars0.githubusercontent.com/u/47131504?s=64&v=4",
            }
        ],
            pinglun:[
    {
        "user_name":"eli_tsao",
        "creat_time":"1111-10-12",
        "comment":"实力点赞",
        "avatar":"https://c-ssl.duitang.com/uploads/item/201709/26/20170926003219_RCjJE.thumb.700_0.jpeg",
    },{
        "user_name":"esao",
        "creat_time":"1999-10-12",
        "comment":"实力点实力点赞实力点赞赞",
        "avatar":"https://c-ssl.duitang.com/uploads/item/201801/17/20180117181801_KRYJQ.thumb.700_0.jpeg",
    },{
        "user_name":"eli_tsao",
        "creat_time":"1999-10-12",
        "comment":"实力点赞实实力点赞力点实力点赞实力点赞赞",
        "avatar":"http://static.hdslb.com/images/member/noface.gif",
    },{
        "user_name":"mu",
        "creat_time":"1999-10-12",
        "comment":"实力点赞",
        "avatar":"https://avatars0.githubusercontent.com/u/47131504?s=64&v=4",
    },{
        "user_name":"ding",
        "creat_time":"1999-10-12",
        "comment":"实力点赞",
        "avatar":"https://c-ssl.duitang.com/uploads/item/201509/25/20150925110828_iMnGx.thumb.700_0.jpeg",
    },{
        "user_name":"diao",
        "creat_time":"1999-10-12",
        "comment":"实力点赞",
        "avatar":"https://c-ssl.duitang.com/uploads/item/201802/21/20180221223815_xkkyq.thumb.700_0.jpg",
    },{
        "user_name":"eli_tsao",
        "creat_time":"1999-10-12",
        "comment":"实力点赞",
        "avatar":"https://c-ssl.duitang.com/uploads/item/201509/25/20150925110828_iMnGx.thumb.700_0.jpeg",
    },{
        "user_name":"eli_tsao",
        "creat_time":"1999-10-12",
        "comment":"实力点赞",
        "avatar":"http://static.hdslb.com/images/member/noface.gif",
    },{
        "user_name":"eli_tsao",
        "creat_time":"1999-10-12",
        "comment":"实力点赞",
        "avatar":"http://static.hdslb.com/images/member/noface.gif",
    },{
        "user_name":"eli_tsao",
        "creat_time":"1999-10-12",
        "comment":"实力点赞",
        "avatar":"http://static.hdslb.com/images/member/noface.gif",
    },{
        "user_name":"eli_tsao",
        "creat_time":"1999-10-12",
        "comment":"实力点赞",
        "avatar":"http://static.hdslb.com/images/member/noface.gif",
    },
]
        }
    },
    components:{
        cebian
    },
    mounted() {
        var aid=this.$route.params.aid;
        this.getArticle(aid);
        this.getpinglun(aid);
    },
    methods:{
        getArticle(aids){
            //////console.log("获取文章信息");
            axios.get("http://localhost:8080/api/NewsViewSet",{
                params:{
                    aid:aids
                }
            })
            .then((res)=>{
                var m=aids;
                // console.log("XX( •̀ ω •́ )y新闻");
                // console.log(res.data.results[m].total_views);
                // console.log(res.data);
                this.article.title=res.data.results[m].topic;
                this.article.date=res.data.results[m].create_time;
                this.article.content=res.data.results[m].content;
                this.article.source=res.data.results[m].tag;
                this.article.date=res.data.results[m].time;
                this.article.source=res.data.results[m].title;
                this.article.writer=res.data.results[m].sorces;
                //this.article.readingQua=res.data.results[m].total_views;


            })
            .catch(function(error){
                //console.log("error");
            })
        },
        getpinglun(aids){
            axios.get("http://127.0.0.1:8000/api/NewsCommentViewSet/",{
                params:{
                    aid:aids
                }
            })
            .then((res)=>{
                // console.log("pinglun");
                // console.log(res.data);
                this.pinglun=res.data.results;
                //console.log("评论");
                console.log(this.pinglun.length);
                //console.log("edqwqqeq");
            })
            .catch(function(error){
                //console.log("error");
            }).then(()=>{
                for(var i=0;i<3;i++){
                    this.showPinglun[i]=this.pinglun[i];
                }
                //条数
                //console.log("sssssssaksdjasdjiadjio");
                this.tiaoshu=parseInt(this.pinglun.length/3);
                //console.log("条数");
                //console.log(this.tiaoshu);
            })
        },
        putpinglun(aids){
            if(this.form.length!=0){
                axios.post("http://127.0.0.1:8000/api/NewsCommentViewSet/",{
                    comment_id:"aids",
                    user_id:1111,
                    content:this.form,
                    user_name:"ggg",
                    avatar:"https://avatars0.githubusercontent.com/u/47131504?s=64&v=4",
                    create_time: "vfff"
                })
                .then((res)=>{
                    this.$message({
                    message: "你已经成功提交评论",
                    type: 'success'
                });
                    //console.log("pinglun");
                })
                .catch(function(error){
                    //console.log("error");
                })
            }else{
                this.$notify({
                title: '提交失败',
                message: '评论不得为空',
                offset: 100
                });
            }
        },
        input(){
            if(localStorage.getItem("token")==null){
                this.$message.error('请先登录');
            }else{
                this.putpinglun();
            }
        },
        handleSizeChange(val) {
            //console.log(`每页 ${val} 条`);
            var page= `${val}`;
            //console.log(this.show[0]);
            //console.log(this.pinglun[0]);
            for(var i=0;i<3;i++){
                this.showPinglun[i]=this.pinglun[(page-1)*3+i];
                //console.log(this.showPinglun[i]);
            }
        },
        //点击切换的数字
        handleCurrentChange(val) {
            //console.log(`当前页: ${val}`);
            //console.log("pinglunshow");
            var page= `${val}`;
            //console.log(page);
            for(var i=0;i<3;i++){
                vue.set(this.showPinglun,i,this.pinglun[(page-1)*3+i])
            }
        }
    }
}
</script>
<style scoped>
.article{
    text-align: center;
    max-width: 1500px;
    margin: 0 auto;
}
h1{
    text-align: center;
    margin-bottom: 20px;
    font-weight: 900;
    color: #000000;
    letter-spacing:8px;
}
p{
    text-align: left;
    font-size: 18px;
    text-indent: 36px;
    font-weight: 300;
    color: #000000;
}
.content /deep/ p{
    font-weight: 600;
    line-height: 40px;
    font-size:20px;
    text-indent: 40px;
    text-align: left; 
    color: #000000;
}
.el-button--primary{
    border-color: #cff9c8;
}
.link{
    margin-top: 20px;
    margin-bottom: 20px;
    color: #14A53B;
}
.tijiao span{
    color: #ffffff !important;
}

</style>